<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>
        畜禽普查记录添加
    </title>
</head>
<body style="background-color: #ffffff">
<div id="app">

    <template v-loading="indexLoading">
        <el-page-header @back="goBack" content="添加页面">
        </el-page-header>
        <el-divider></el-divider>
        <el-row justify="space-around" type="flex">
            <el-col :span="15" style="border-right: 1px solid #a88d8d">
                <el-col :push=20>
                <el-button  size="mini" type="success" @click="oneClickUpload" plain :loading="action">一键上传</el-button>
                </el-col>
                <el-collapse-transition>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="行政村" prop="villageName"></el-table-column>
                    <el-table-column label="品种名称" prop="varietyName"></el-table-column>
                    <el-table-column label="饲养环境" prop="environment">
                        <template slot-scope="scope">
                            <el-tag size="mini" v-for="(text,i) in (scope.row.environment)" :key="i">{{text}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作"  width="160">
                        <template slot-scope="scope">
                            <div v-loading="scope.row.action">
                            <el-button  :disabled="scope.row.action"   @click="handleAction(scope.$index, scope.row,1)" size="mini">上传
                            </el-button>
                            <el-button @click="handleAction(scope.$index, scope.row,2)" :disabled="scope.row.action"  size="mini">编辑
                            </el-button> <el-popconfirm
                                    confirm-button-text='好的' cancel-button-text='不用了'
                                    icon="el-icon-info" icon-color="red"  @confirm="handleAction(scope.$index, scope.row,3)"
                                    title="这是一段内容确定删除吗？" >
                                <el-button slot="reference" :disabled="scope.row.action"   size="mini" type="danger">删除
                                </el-button>
                            </el-popconfirm>
                            </div>
                        </template>

                    </el-table-column>
                </el-table>
                </el-collapse-transition>
            </el-col>
            <el-col :span="8">
                <el-form :key="num" :model="ruleForm" :rules="formRules" label-position="top" ref="ruleForm">
                    <table>
                        <tr>
                            <td colspan="2">
                                <el-form-item label="行政村名" prop="village">
                                    <el-cascader :options="Village" :show-all-levels="false" placeholder="行政村名"
                                                 size="small"
                                                 v-model="ruleForm.village"></el-cascader>
                                </el-form-item>
                            </td>
                            <td colspan="2">
                                <el-form-item label="品种名称" prop="variety">
                                    <el-select placeholder="品种名称" size="small" v-model="ruleForm.variety">
                                        <el-option :label="item.label" :value="item.value"
                                                   v-for="(item,i) of Variety" :key="i"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                    <el-form-item label="饲养环境" label-width="50" prop="environment">
                        <el-checkbox-group v-model="ruleForm.environment">
                            <el-checkbox label="集中饲养" name="集中饲养"></el-checkbox>
                            <el-checkbox label="散养" name="散养"></el-checkbox>
                            <el-checkbox label="定地" name="定地"></el-checkbox>
                            <el-checkbox label="转地" name="转地"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="备注" prop="maleNum">
                        <el-input type="textarea" placeholder="备注" size="small" style="width: 320px"
                                  v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="蚕照片">
                        <el-upload ref="upload" action="/upload"
                                :on-success="updateSuccess" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item v-if="ruleForm.tableIndex===''">
                        <el-button @click="submitForm('ruleForm')" type="primary">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                    <el-form-item v-else>
                        <el-button @click="submitForm('ruleForm')" type="primary">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="/static/vendor/vue.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                indexLoading: true,
                action:false,
                successLoading:true,
                ruleForm: {
                    tableIndex:'',
                    village: '',
                    variety: '',
                    environment: [],
                    urlPaths:[]
                },
                num: 0,
                tableData: [],
                filter:'',
                Village: [],
                Variety: [],
                formRules: {
                    village: [
                        {required: true, message: '请选择行政村', trigger: 'change'}
                    ],
                    variety: [
                        {required: true, message: '请选择品种名称', trigger: 'change'}
                    ],
                    environment: [
                        {required: true, message: '请选择饲养环境', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let parse = {}
                        parse = JSON.parse(JSON.stringify(this.ruleForm));
                        console.info(parse.environment)
                        let villageCode = parse.village[parse.village.length - 1];
                        this.getVillage(this.Village, villageCode);
                        for (let varietyElement of this.Variety) {
                            if (varietyElement.value === parse.variety) {
                                parse.varietyName = varietyElement.label
                            }
                        }
                        parse.villageName = this.filter.label
                        let tableIndex = parse.tableIndex;
                        let msg=''
                        if (tableIndex!==''){
                            this.tableData.splice(tableIndex,1,parse)
                            this.ruleForm.tableIndex=''
                            msg='修改成功'
                        }else {
                            parse.action=false
                            parse.successLoading =true
                            this.tableData.push(parse);
                            msg='创建成功'
                        }
                        this.resetForm(formName)
                        this.$message({
                            message: msg,
                            type: 'success'
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getVillage(arr, villageCode) {
                for (let i = 0; i <arr.length; i++) {
                    if (arr[i].value === villageCode) {
                        this.filter =arr[i]
                        return
                    }else {
                        if (arr[i].children !== undefined){
                            this.getVillage(arr[i].children, villageCode)
                        }
                    }
                }
            },
            oneClickUpload(){
               let arr = this.tableData
                for (let i = 0; i < arr.length; i++) {
                    this.handleAction(0,arr[i],1)
                }
            },
            handleAction(index, row,type) {
                switch (type) {
                    case 1:{
                        row.action =true
                        /*上传*/
                        let bean ={
                            villageId:row.village.pop(),
                            existVarietyId:row.variety,
                            allNum:row.allNum,
                            maleNum:row.maleNum,
                            femaleNum:row.femaleNum,
                            environment:row.environment.join(","),
                            remark:row.remark,
                            imgUrl:row.urlPaths.join(",")
                        }
                        console.info(bean)
                        let res = top.ajax.synclBody("/yxSurveyCanRecord/createOne",bean);
                        if (res.data===1){
                            setTimeout(() => {
                                this.tableData.splice(index, 1);
                                this.$message({
                                    message: '上传成功',
                                    type: 'success'
                                });
                            }, 500);
                        }else {
                            this.$message.error('上传失败');
                            row.action =false
                        }
                        break;
                    }
                    case 2:{
                        /*编辑*/
                        row.tableIndex=index
                        this.ruleForm = row
                        break;
                    }
                    case 3:{
                        /*删除*/
                        this.tableData.splice(index, 1)
                        console.log(index, row);
                        break;
                    }
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$refs.upload.clearFiles();
            },
            /*加载已知畜禽品种*/
            getVarieties() {
                this.Variety = top.ajax.synclBody("/yxSurveyCanRecord/getVarieties",);
                console.info(this.Variety)
            },
            getVillages(code) {
                let data = top.ajax.synclBody("/yxSurveyCanRecord/getVillages/" + code,);
                this.Village = this.getTreeData(data)
            },
            /*加载行政村 tree*/
            getTreeData(data) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].children.length < 1) {
                        data[i].children = undefined;
                    } else {
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },
            updateSuccess(response, file, fileList){
                if (response.status ==="200"){
                    let url = response.data.url;
                    this.ruleForm.urlPaths.push(url)
                }
            },
            goBack() {
                window.history.back();
            }
        },
        mounted: function () {
            this.getVarieties()
            this.getVillages("610000000000")
        },
        created() {
            this.indexLoading = false
        }
    })
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
</html>
